<?php include("/includes/header.php") ?>
<?php include("/includes/sidebar.php") ?>

<style type="text/css">
	.undo-form h5 {
		margin: 5px;
	}
</style>

<div class="content row-fluid"> 
	<div class="span12 table-placer">
		<div class="alert alert-info"><h4>Agent Listing</h4></div><br>
		<form class="form-horizontal" id="filter-form">
			<div class="span12">
	    	<div>
					<div class="control-group">
						<label class="control-label">Agent</label>
						<div class="controls">
							<select id="agent-select" class="span6">
								<option value="*">---All Agent---</option>
								<?php
									$sql_agent = "SELECT * FROM agent";
									$query_agent = mysql_query($sql_agent);
									while ($baris_agent = mysql_fetch_array($query_agent)) {
								  	echo "<option value='".$baris_agent[id]."'>".$baris_agent[nama]."</option>";
									}
								?>
							</select>
						</div>
					</div>
					<div class="control-group input-append">
						<label class="control-label">Checkout Period</label>
						<div class="controls">
							<select id="period-select" class="span6">
								<option value="*">---All period---</option>
								<option value="dayviewagent" data-format="yyyy-m-d" data-min-view="days">Day</option>
								<option value="monthviewagent" data-format="yyyy-m" data-min-view="months">Month</option>
								<option value="yearviewagent" data-format="yyyy" data-min-view="years">Year</option>
							</select>
						</div>
					</div>
					<div class="control-group input-append date-placer">
						<label class="control-label">Checkout Date</label>
						<div class="controls">
							<input placeholder="Choose date" type="text" class="date-select span6" id="datepick" name="datepick" readonly="">
						</div>
					</div>
					<div class="control-group input-append">
						<label class="control-label">Payment status</label>
						<div class="controls">
							<select id="status-select" class="span6">
								<option value="*">---All status---</option>
								<option value="1">Paid</option>
								<option value="0">Not yet</option>
							</select>
						</div>
					</div>
	    	</div>
				<div>
					<div class="span12">
						<div class="control-group input-append">
							<div class="controls">
								<button type="submit" class="btn btn-info">
									Submit
								</button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</form>

		<div id="table-placer">
			<div class="clearfix"></div>
			<div class="alert alert-info"><h4>Table Result</h4></div>
			<table class="table table-striped result-table">
				<thead>
					<tr>
						<th class="al_center" valign="middle">No</th>
						<th class="al_center" valign="middle">Agent Name</th>
						<th class="al_center" valign="middle">Customer Name</th>
						<th class="al_center" valign="middle">Room</th>
						<th class="al_center" valign="middle">Checkout</th>
						<th class="al_center" valign="middle">Agent Comission</th>
						<th class="al_center" valign="middle">Payment Status</th>
					</tr>
				</thead>
				<tbody id="result-body">
				</tbody>
			</table>
		</div>
	</div>           
</div>

<div class="footer">
</div>

<?php include("/includes/footer.php") ?>

<script type="text/javascript">
	
	$(document).ready(function() {

		$('.date-placer').hide();
		$('#table-placer').hide();

		$('#datepick').datepicker();

		$('#period-select').change(function(event) {
			var that = $(this);
			var optionDate = that.find("option:selected");
			act = that.val();
			$('#datepick').datepicker("remove");
			$('#datepick').val("");
			if (that.val() != '*') {
				$('.date-placer').show();
				$('#datepick').removeAttr('disabled');
				$('#datepick').datepicker({
					format: optionDate.data("format"),
					minViewMode: optionDate.data("min-view"),
					autoclose: true
				});
			}else{
				$('.date-placer').hide();
				$('#datepick').attr('disabled', 'disabled');
			}
			$('.date-select').focus();
		});

		$('#filter-form').submit(function(event) {
			event.preventDefault();
			$('#table-placer').hide();
			// ------------ GET AGENT TRANSACTION ---------------
			var formTrans = {
				act: 'view',
				period: $('#period-select').val(),
				date: $('#datepick').val(),
				agent: $('#agent-select').val(),
				status: $('#status-select').val()
			}

			$.ajax({
				url: 'action/act_status_payment.php',
				type: 'POST',
				data: formTrans,
			})
			.done(function(data) {
				// console.log("success");
				$('#result-body').html(data);
				$('#table-placer').show();

				$('.currency').autoNumeric('init', {
					aSign: 'IDR ',
					aPad: false
				});

			})
			.fail(function() {
				// console.log("error");
			})
			.always(function() {
				// console.log("complete");
			})
		});

		$('#table-placer').on('switch-change', '.status-bayar', function(event) {
			event.preventDefault();
			var that = $(this);
			var is_active = "";

			if (that.find('.cek-status').is(":checked")) {
				is_active = 1;
			} else {
				is_active = 0;
			};

			var formEdit = {
				act: 'edit',
				agentEdit: that.closest('tr').find('.id-agent-edit').val(),
				foEdit: that.closest('tr').find('.id-fo-edit').val(),
				statusEdit: is_active
			}

			$.ajax({
				url: 'action/act_status_payment.php',
				type: 'POST',
				data: formEdit,
			})

			.done(function(data) {
				// console.log("success");
				if (data == "PAID") {
					that.closest('td').find('.status-bayar').fadeOut('medium', function(){
						that.closest('td').find('.undo-form').fadeIn('medium');
					});
		    }else if (data == "UNPAID") {
					that.closest('td').find('.undo-form').fadeOut('medium', function(){
						that.closest('td').find('.status-bayar').fadeIn('medium');
					});
		    }
			})
			.fail(function() {
				// console.log("error");
			})
			.always(function() {
				// console.log("complete");
			});
		});

		$('#table-placer').on('click', '.undo-paid', function(event) {
			event.preventDefault();
			var that = $(this);

			var formEdit = {
				act: 'edit',
				agentEdit: that.closest('tr').find('.id-agent-edit').val(),
				foEdit: that.closest('tr').find('.id-fo-edit').val(),
				statusEdit: 0
			}

			$.ajax({
				url: 'action/act_status_payment.php',
				type: 'POST',
				data: formEdit,
			})

			.done(function(data) {
				// console.log("success");
				that.closest('td').find('.switch-on').removeClass('switch-on').addClass('switch-off');
				that.closest('td').find('.undo-form').fadeOut('medium', function(){
					that.closest('td').find('.status-bayar').fadeIn('medium');
				});
			})
			.fail(function() {
				// console.log("error");
			})
			.always(function() {
				// console.log("complete");
			});
		});
	});
</script>